<template>
	<view class="wrap-pay-methods" v-if="dataInfo !== null && userInfo !== null">
		<view class="title f-28">请选择支付方式</view>

		<view class="pay-list">
			<block v-for="(item, index) in list" :key="index">
				<view class="item flex align-center just-between">
					<view class="choose" @click="onChoosePay(item, index)">
						<image
							class="choose"
							v-if="current === index"
							:src="$staticImagePath('common/choose_select.png')"
						/>
						<image class="choose" v-else :src="$staticImagePath('common/choose_normal.png')" />
					</view>

					<image class="icon" :src="$staticImagePath(item.icon)" />

					<view class="name f-28">{{ item.title }}</view>

					<!-- <image class="arrow" :src="$staticImagePath('publish/publish_arrow.png')" /> -->
				</view>
			</block>

			<view class="wrap-wallet-list" v-if="current === 1">
				<block v-for="(item, index) in wallet_list" :key="index">
					<view class="wallet-item flex align-center" v-if="item.isShow" :class="parseFloat(dataInfo[item.canUse]) == 0 ? 'disable-item' : ''">
						<view class="choose" @click="onChooseWallet(index)">
							<image
								class="choose"
								v-if="item.select"
								:src="$staticImagePath('common/choose_select.png')"
							/>

							<image class="choose" v-else :src="$staticImagePath('common/choose_normal.png')" />
						</view>

						<view class="right flex column">
							<view class="name f-24">{{ item.title }}</view>

							<view class="money-bg f-24 flex align-center">
								<view>余额: {{ dataInfo[item.money] }}</view>

								<view>可用: {{ dataInfo[item.canUse] }}</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: "",
			},
			method: {
				type: String,
				default: "",
			},
			payMethod: {
				type: Array,
				default: [],
			},
			money: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				list: [
					{
						title: "微信支付",
						icon: "common/wx_pay.png",
						type: "wechat",
						method: "miniapp",
					},
					{
						title: "钱包支付",
						icon: "common/wallet_pay.png",
						type: "balance",
						method: "make_up",
					},
				],
				wallet_list: [], //钱包列表
				current: -1,
				dataInfo: null,
				userInfo: null,
			};
		},
		watch: {
			money: {
				handler(newVal, oldVal) {
					if (newVal !== oldVal) {
						this.current = -1;
						this.wallet_list.forEach((item) => {
							item.select = false;
						});
					}
				},
				immediate: true,
			},
		},
		mounted() {
			this.$commonNetwork.getWalletBalanceData("donate", (res) => {
				this.dataInfo = res;
			});

			this.$commonNetwork.getUserIdenInfoData((res) => {
				this.userInfo = res;
				const balanceInfo = {
					title: "余额钱包",
					money: "balance",
					canUse: "can_balance",
					method: "balance",
					type: "balance",
					select: false,
					isShow: true,
				};
				const bribeInfo = {
					title: "红包钱包",
					money: "bribe",
					canUse: "can_bribe",
					method: "bonus",
					type: "balance",
					select: false,
					// isShow: this.userInfo.code === 0 || this.userInfo.partner_type == 3,
					isShow: true,
				};
				const sellInfo = {
					title: "销售钱包",
					money: "money",
					canUse: "can_money",
					method: "sell",
					type: "balance",
					select: false,
					isShow: this.userInfo.code === 1,
				};
				const commissionInfo = {
					title: "分佣钱包",
					money: "commission",
					canUse: "can_commission",
					method: "commission",
					type: "balance",
					select: false,
					isShow: this.userInfo.partner_type !== null,
				};
				this.wallet_list = [balanceInfo, bribeInfo, sellInfo, commissionInfo];
			});
		},
		methods: {
			/**
			 * 选择支付方式
			 */
			onChoosePay(item, index) {
				this.current = index;
				this.$emit("update:method", item.method);
				this.$emit("update:type", item.type);
				if (index === 0) {
					this.wallet_list.forEach(item => {
						item.select = false;
					})
				}
			},
			/**
			 * 选择钱包
			 */
			onChooseWallet(index) {
				const item = this.wallet_list[index];
				var current = parseFloat(this.dataInfo[item.canUse]);
				if (current === 0) {
					return;
				}
				const total = parseFloat(this.money);
				var canUse = 0;
				this.wallet_list.forEach((idx) => {
					if (idx.select) {
						canUse += parseFloat(this.dataInfo[idx.canUse]);
					}
				});

				if (item.select === false) {
					if (canUse >= total) {
						return;
					}
					var current = parseFloat(this.dataInfo[item.canUse]);

					if (current >= total) {
						this.wallet_list.forEach((i) => {
							if (i.money === item.money) {
								i.select = true;
							} else {
								i.select = false;
							}
						});
					} else {
						item.select = true;
					}
				} else {
					item.select = false;
				}

				var chooseMethods = [];
				this.wallet_list.forEach((idx) => {
					if (idx.select) {
						chooseMethods.push(idx.method);
					}
				});
				if (chooseMethods.length === 0) {
					this.$emit("update:method", "make_up");
					this.$emit("update:payMethod", []);
				} else if (chooseMethods.length === 1) {
					this.$emit("update:method", chooseMethods[0]);
					this.$emit("update:payMethod", []);
				} else {
					this.$emit("update:payMethod", chooseMethods);
					this.$emit("update:method", "make_up");
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-pay-methods {
		width: 100%;
		overflow: hidden;

		.title {
			color: #333333;
		}

		.pay-list {
			margin-top: 30rpx;
			width: 100%;
			overflow: hidden;

			.item {
				width: 100%;
				height: 100rpx;
				overflow: hidden;
				gap: 20rpx;

				.icon {
					width: 50rpx;
					height: 50rpx;
				}

				.name {
					flex: 1;
					color: #333;
				}

				.arrow {
					width: 12rpx;
					height: 20rpx;
				}
			}

			.wrap-wallet-list {
				width: 100%;
				overflow: hidden;
				box-sizing: border-box;

				.wallet-item {
					width: 100%;
					height: 100rpx;
					overflow: hidden;
					gap: 20rpx;
					padding: 0 20rpx;

					.right {
						flex: 1;
						overflow: hidden;
						gap: 10rpx;

						.name {
							color: #333333;
						}

						.money-bg {
							width: 100%;
							overflow: hidden;
							gap: 20rpx;
							color: #999999;
						}
					}
				}
				.disable-item {
					background-color: #F4f4f4;
				}
			}
		}
	}
	.choose {
		width: 30rpx;
		height: 30rpx;
	}
</style>
